import React from 'react';
import {IntlProvider} from "react-intl-hooks"; // 国际化
import Global from './context/global';
import {hot} from "react-hot-loader/root";
import {SettingInterface} from "./store/interface/SettingInterface";
import {ApplicationInterface} from "./interface/ApplicationInterface";
import {AuthInterface} from "./store/interface/AuthInterface";
import locales, {languages, defaultLocale} from './locale';
import Interceptors from './config/interceptors';
import {connect} from 'react-redux';
import MenuContainer from "./container/MenuContainer";
import MainContainer from "./container/MainContainer";
import Header from "./components/Header";
import Login from "./view/login";
import {Layout, ConfigProvider, message, Modal} from "antd";
// 由于 antd 组件的默认文案是英文，所以需要修改为中文
import zhCN from 'antd/lib/locale/zh_CN';
import moment from 'moment';
import 'moment/locale/zh-cn';

moment.locale('zh-cn');
// 全局拦截器
Interceptors(message);

const Application = (props: ApplicationInterface) => {
    const {locale = 'zh', hasLogin, initUserValue, showUserModal} = props;
    const userModalRef: any = React.useRef();

    // 通用用户弹框
    React.useEffect(() => {
        if (initUserValue && showUserModal) {
            userModalRef.current = Modal.info({width: 900, maskClosable: false});
            userModalRef.current.update({
                title: "用户信息",
                style: {top: 20},
                content: "用户",
                onCancel: () => {
                    userModalRef.current.destroy();
                },
                onOk: () => {
                    userModalRef.current.destroy();
                }
            });
        }
    }, [initUserValue, showUserModal]);

    return (
        <Global.Provider value={{Message: message}}>
            <IntlProvider locale={locale as string} defaultLocale={(defaultLocale as languages)}
                          messages={locales[locale as string].pack}>
                <ConfigProvider locale={zhCN}>
                    {
                        hasLogin
                            ? (
                                <Layout>
                                    <MenuContainer/>
                                    <Layout.Content className={""}>
                                        <Header/>
                                        <MainContainer/>
                                    </Layout.Content>
                                </Layout>
                            ) : <Login/>
                    }
                </ConfigProvider>
            </IntlProvider>
        </Global.Provider>
    );
}

export default connect(
    (state: {
        setting: SettingInterface,
        auth: AuthInterface,
        user: any
    }) => (
        {...state.setting, ...state.auth, ...state.user}
    ))(process.env.NODE_ENV === "development" ? hot(Application) : Application);
